<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<form class="layui-form">

    权限名:
    <div class="layui-inline">
        <input type="text" name="name" value="" class="layui-input" lay-affix="clear">
    </div>
    权限编号:
    <div class="layui-inline">
        <select id="role" name="role" lay-filter="role">
            <option value="">请选择权限</option>
        </select>
    </div>
    <%--开始日期:
    <div class="layui-inline">
        <input type="text" class="layui-input" name="beginCreateTime" id="beginCreateTime" placeholder="yyyy-MM-dd">
    </div>
    结束日期:
    <div class="layui-inline">
        <input type="text" class="layui-input" name="endCreateTime" id="endCreateTime" placeholder="yyyy-MM-dd">
    </div>--%>
    <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="submitSearch">搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
<table class="layui-hide" id="tableId" lay-filter="tableId"></table>

<script src="/static/js/jquery-2.1.4.js"></script>
<script src="/static/js/mylayer.js"></script>
<script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="content">内容</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteAll">批量删除</button>
    </div>
</script>

<script type="text/html" id="imageTemplet">
    <img src="/pic/{{d.image}}"/>
</script>

<script type="text/html" id="statusTemplet">
    <%--{{#     if(d.status == 1){            }}
                   上架
    {{#     } else if(d.status == 0){     }}
                   下架
    {{#     }                             }}--%>
    <input type="checkbox" name="status" value="{{= d.id }}" title="上架|下架" lay-skin="switch"
           lay-filter="statusFilter" {{= d.status == 1 ? "checked" : "" }}>
</script>
<script>
    /*layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
    })*/
    layui.use(['table','form','laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#beginCreateTime',
            lang: 'en',
            type: 'datetime'
        });
        laydate.render({
            elem: '#endCreateTime',
            lang: 'en',
            type: 'datetime'
        });
        form.on('switch(statusFilter)', function(obj){
            var id = this.value;
            var name = this.name;
            var checked = obj.elem.checked
            //接下来的逻辑是：传id和状态的值checked给后台，找到id，把值更改为checked
            //但是checked是boolen，改成int
            var status = checked ? 1 : 0;
            $.post(
                '/auth?method=updateStatus',
                {"id":id , "status":status},
                function (result) {
                    //这里只是返回个信息而已，逻辑交给后台
                    if(result.code == 0){
                        mylayer.okMsg(result.msg);
                    } else {
                        mylayer.errorMsg(result.msg);
                    }
                },
                'json'
            )
        });
        // 创建渲染实例
        table.render({
            elem: '#tableId',
            toolbar: '#toolbarDemo',
            url:'/auth?method=selectByPage', // 此处为静态模拟数据，实际使用时需换成真实接口
            page: true,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'id', fixed: 'left', title: 'ID', sort: true},
                {field:'name', title: '权限名'},
                {field:'role', title: '角色'},
                {field:'status', title: '状态' ,templet: '#statusTemplet'},
                /*{field:'createTime', title: '创建时间'},*/
                {fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]]
        });

        // 工具栏事件
        table.on('toolbar(tableId)', function(obj){
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch(obj.event){
                case 'add':
                    //做一个弹出框
                    layer.open({
                        type:2,
                        title:"add data",
                        area: ['80%','40%'],
                        content: '/page/auth/add'
                    })
                    break;
                case 'deleteAll':
                    var data = checkStatus.data;
                    console.log(data);
                    //0:{id: 1, name: 'java', credit: 5}
                    //1:{id: 2, name: 'UI', credit: 4}
                    //创建一个数组
                    var ids = new Array();
                    //把data放进数组ids
                    $(data).each(function (){
                        ids.push(this.id);
                    })
                    console.log(ids);
                    //用Ajax传递数据
                    layer.confirm('真的删除行么', function(index){
                        $.post(
                            '/auth?method=deleteAll',
                            {"ids":ids},

                            function (result) {
                                console.log("id="+this.id+"for now");
                                console.log(result);
                                mylayer.okMsg(result.msg)
                                table.reload('tableId')
                            },
                            'json'
                        )
                    });
                    break;
            };
        });
        //删除和编辑
        table.on('tool(tableId)', function(obj){ // 双击 toolDouble
            var data = obj.data;
            console.log(obj)//data:{id: 1, name: 'java', credit: 5}

            if(obj.event === 'del'){

                layer.confirm('真的删除行么', function(index){
                    $.post(
                        '/auth?method=deleteById',
                        {"id":data.id},

                        function (result) {
                            console.log("id="+this.id+"for now");
                            console.log(result);
                            mylayer.okMsg(result.msg)
                            table.reload('tableId')
                        },
                        'json'
                    )
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    title: '编辑',
                    type: 2,
                    area: ['80%','80%'],
                    content: '/page/auth/update?id='+data.id
                });
            }
            else if(obj.event === 'content'){
                layer.open({
                    title: '内容',
                    type: 1,
                    area: ['90%','90%'],
                    content: data.content
                });
            }
        });

        form.on('submit(submitSearch)', function(data){
            var field = data.field; // 获得表单字段
            // 执行搜索重载

            console.log('check')
            table.reload('tableId', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });

            return false;
            //查询框
            // 阻止默认 form 跳转
        });
        /*$.post(
            '/type?method=selectAll',
            function (jsonObj){
                console.log(jsonObj);
                var data = jsonObj.data;
                //遍历
                $(jsonObj.data).each(function() {
                    console.log(data.name)
                    $('#role').append('<option value="'+this.id+'">'+this.name+'</option>');
                });

                // 更新表单选择框
                form.render('select');
            },
            'json'
        )*/
    });

</script>
</body>
</html>
